<template>
  <div class="product-detail"  >
    <van-nav-bar
      title=""
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div v-for="(item ,index) in form" :key="index">
      <div class="image-slider">
        <img :src="item.photo" alt="产品图片" />
      </div>

      <div class="product-info">
        <div class="price-stock" >
          <span class="price">¥{{ item.price }}</span>
          <span class="stock">库存 {{ item.sales }}+</span>
        </div>
        <h3>{{ item.comname }}</h3>
        <div class="selection">
          <span>已选：</span>
          <el-input v-model="item.product" disabled></el-input>
        </div>

        <div class="description">
          <h4>商品详情</h4>
          <p>{{ item.details }}</p>
          <img :src="item.images" alt="产品图片" />
        </div>
      </div>
    </div>


    <!-- 固定底部 -->
    <div class="actions">
      <el-button type="primary" @click="addToCart">加入购物车</el-button>
      <el-button type="success" @click="buyNow">立即购买</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {log} from "qrcode/lib/core/galois-field";

export default {
  data() {
    return {
      user:{},
      form: [],
      id: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    show1(){
      axios.post(`/commodity/commodityshowlist?id=${this.id}`).then(res=>{
        this.form=res.data.data
        this.id=res.data.data[0].id
      })
    },

    addToCart() {
      axios.post('/shoppingcart/shoppingcartadd?id='+this.user.id,this.form).then(res=>{
        this.$message.success('添加成功')
        this.$router.push('/shoppingcart')
      })
    },
    buyNow() {
      this.$message.success('立即购买');
      localStorage.setItem('id',this.id)
      this.$router.push('/OrderConfirmation')

    }
  },
  created() {
    this.id = localStorage.getItem('id')
    this.show1();
    this.user = JSON.parse(localStorage.getItem('admin'));
    console.log(this.user.id)
  }
};
</script>




<style scoped>
.product-detail {
  padding: 20px;
  position: relative;
  min-height: 100vh; /* 确保页面至少占满整个视口高度 */
}

.image-slider {
  text-align: center;
  margin-bottom: 20px;
}

.price-stock {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 24px;
  font-weight: bold;
}

.stock {
  font-size: 16px;
  color: #999;
}

.selection {
  margin: 10px 0;
}

.description {
  margin: 10px 0;
}

.actions {
  position: fixed; /* 固定在底部 */
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
  padding: 10px; /* 内边距 */
  background-color: white; /* 背景色 */
  border-top: 1px solid #e0e0e0; /* 顶部边框 */
}

.actions .el-button {
  margin: 0 10px; /* 按钮之间的间距 */
}
</style>



